<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />


    <style>
    body{
      /*background: rgb(242,242,242);*/
      width:100%;
      padding-top: 1.5rem;
    }
      #header{
        width:100%;
        font-size: 1.1rem;

        background: white;
        margin-bottom: 0.8rem;
        margin-top:1rem;
        padding-bottom: 1rem;
        display: flex;
        align-items: center;


      }
      #header img{
        width:1rem;
        height: 1rem;
        margin-right: 7.5rem;
        margin-left: 0.8rem;


      }
      ul li{
        width:100%;
        height: 3.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;
        margin-top: 0.1rem;
      }
      ul li p{
          padding-left: 1.2rem;
        }


      .head{
        display: flex;
        align-items: center;
      }
      .head span{
        color:#999999;
      }
      .headimg{
        width:2.5rem;
        height:2.5rem;
        background-image: url("../image/u28.png");
        background-size:100% 100%;
        border-radius: 50%;

      }

      .right{
    width:1.2rem;
    height: 1rem;
    padding-right: 1.5rem;
    padding-left: 0.8rem;
      }

      .headpage{
        display: none;
        position: fixed;
        width:100%;
        height: 100%;
        top:0;
        left:0;
        background: rgba(0,0,0,0.4);
        z-index: ;
      }
      .butwrap{
        position: absolute;
        width:90%;
        height: auto;
        bottom: 0.5rem;
        margin-left:5%;
        text-align: center;
      }
      .btn{
        width:100%;
        height: 2.7rem;
        line-height: 2.7rem;
        text-align: center;
        background: rgba(242,242,242,0.7);
        margin-top: 0.8rem;
        font-weight: 500;
        border-radius: 0.1rem;
      }






        .remove{
            position: absolute;
            top:0.8rem;
            left:1.2rem;
        }
        .en{
            position: absolute;
            top:0.8rem;
            right:1.2rem;
        }
        .sex{
          width:100%;
          height: 12rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .sex span{
          font-size: 1.2rem;
          padding-bottom: 0.8rem;
        }
        .sextxt{
          font-size: 2rem;
          color:rgb(64,204,203);
        }
        input{
          text-align: right;
          outline: none;
        }
        .button{
          width: 60%;
          margin: 3rem auto;
          background-color: #40cccc;
          color:#fff;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          border-radius: 1rem;
        }
    </style>
</head>

<body>

  <div id="header">
    <img src="../image/u18.png" onclick="closewin()">
      宝宝信息
  </div>
  <ul>
    <li>
        <p>照片</p>
         <div class="head" >
            <div class="headimg"  id="head_url" onclick="showAction()"></div>
            <img src="../image/a11.png" class="right">
          </div>
      </li>
      <li>
          <p>姓名</p>
           <div class="head">
              <input type="text" name=""  placeholder="宝宝名字" class="input" id="name">
              <img src="../image/a11.png" class="right">
            </div>
        </li>

          <li>
              <p>生日</p>
               <div>
                  <input  class="mysex" type="text" id="birthday" placeholder="未选择" style="text-align:right;color:rgb(64,204,203)" value=>
                  <img src="../image/a11.png" class="right">
                </div>

            </li>
            <li style="border-bottom:0.1rem solid rgb(242,242,242)">
                <p>性别</p>
                <div>
                   <input  class="my9" type="text" id="gender" placeholder="未选择" style="text-align:right;color:rgb(64,204,203)" value="男">
                   <img src="../image/next2.png" class="right">
                 </div>
              </li>

    </ul>
<div class="button" onclick="saves()">
  保存信息
</div>
</body>

<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/select.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

var userinfo=$api.getStorage('userinfo');
var gender

var head_img
var birthday
apiready = function() {


            api.addEventListener({
                name:'addjl_ok',
                extra:{
                    threshold:0
                }
            }, function(ret, err){
              api.closeWin({

              });

            })
}

function saves() {
  var name = $("#name").val()
  if(name=='' || head_img==''){
    msgcode('请完善宝宝信息')
    return false;
  }
  // alert(userinfo.id)
  // alert(name)
  // alert(head_img)
  // alert(getder)
api.confirm( {
  title: '是否确认信息,不可更改',

  buttons: [ '确定', '取消' ]
}, function ( ret, err ) {
  var index = ret.buttonIndex;
  if ( index == 1 ) {
    if(!head_img){
      msgcode('请上传宝宝头像')
      return false;
    }
    api.ajax({
        url: SITE_URL+'user_api/baby/add_baby',
        method: 'post',
        data: {
            values: {
                user_id: userinfo.id,
                name:name,
                head_img:head_img,
                gender:gender,
                birthday:birthday
            }
        }
    },function(ret, err){
        if (ret) {
          if(ret.error==200){
            msgcode('已为您的宝宝生成日记')
            api.sendEvent({
                name: 'add_baby',

            });
            setTimeout(function () {
              api.openWin({
                  name: 'add_rj',
                  url: './add_rj.html'
              });
            },500)

          }else{
            msgcode('稍后再试')
          }
            //alert( JSON.stringify( ret ) );
        } else {
          msgcode('请检查网络连接')
            //alert( JSON.stringify( err ) );
        }
    });

  }
} )

}


$(function () {

    var my9 = [ '男','女', '其他'];


    $.scrEvent({
            data: my9,
            evEle: '.my9',
            title: '性别',
            defValue: "其他",
            afterAction: function (data) {
              $('.my9').val(data);
            //  alert(data)

              if(data=='男'){
                gender=1;
              }else if(data=='女'){
                gender=2;
              }else{
                gender=0
              }



            }
        });



});


$(function () {





    $.dateSelector({
          evEle: '.mysex',
          startYear: '1950',
          endYear: '2019',
          timeBoo: false,
          afterAction: function (d1, d2, d3) {
             birthday = d1 + '-' + d2 + '-' + d3;
              $("#birthday").val(birthday)

          }
      });



});


      function backclick(){
        api.historyBack({
          frameName: 'family'
      }, function(ret, err) {
          if (!ret.status) {
              api.closeWin();
          }
      });
      }







    function showAction() {
        api.actionSheet({
            title: '上传图片',
            cancelTitle: '取消',
            buttons: ['拍照', '从手机相册选择']
        }, function(ret, err) {
            if (ret) {
                getPicture(ret.buttonIndex);
            }
        });
    }

    function getPicture(sourceType) {
        if (sourceType == 1) { // 拍照
                        api.getPicture({
                          sourceType: 'camera',
                          encodingType: 'jpg',
                          mediaValue: 'pic',
                          destinationType: 'url',
                          allowEdit: true,
                          quality: 50,
                          targetWidth: 100,
                          targetHeight: 100,
                          saveToPhotoAlbum: false
                }, function(ret, err) {
                    if (ret) {
                      saveImg(ret.data)
                    //    alert(JSON.stringify(ret));
                    } else {
                      msgcode("请重新选择")
                      //  alert(JSON.stringify(err));

                    }
                });
        } else if (sourceType == 2) { // 从相机中选择
            api.getPicture({
                sourceType: 'library',
                encodingType: 'jpg',
                mediaValue: 'pic',
                destinationType: 'url',
                allowEdit: true,
                quality: 100,
                saveToPhotoAlbum: false
            }, function(ret, err) {
                if (ret) {
                  saveImg(ret.data)
                }
            });
        }
    }


          function saveImg(path) {

            api.ajax({
                url: SITE_URL+'square_api/fileservice/posting_img',
                method: 'post',
                data: {
                    files: {
                        image: path
                    }
                }
            },function(ret, err){
                if (ret) {
                  if(ret.error==200){
                    document.getElementById('head_url').style.backgroundImage="url('"+ret.data+"')";
                      head_img=ret.data;
                  }
        //            alert( JSON.stringify( ret ) );
                } else {
                  msgcode('上传失败1张图片')
                    //alert( JSON.stringify( err ) );
                }
            });

          }

</script>

</html>
